<template>
  <!--第二部:大小容器也有  -->
  <div class="box" ref="line" id="line"></div>
</template>

<script>
//第一步:引包
import * as echarts from "echarts";
export default {
  name: "",
  //因为能保证容器节点渲染完毕，有真实的DOM节点
  mounted() {
    //初始化echarts实例
    let mycharts = echarts.init(this.$refs.line);
    //配置项
    let option = {
      xAxis: {
        type: "category",
        //两边不留白
        boundaryGap: false,
        show: false,
      },
      yAxis: {
        show: false,
      },
      series: [
        {
          //线条颜色
          lineStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "yellowgreen", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "purple", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
          type: "line",
          data: [11, 9, 20, 57, 32, 82, 99, 19, 22],
          //平滑曲线
          smooth: true,
          //拐点不要
          symbol: "none",
          //填充颜色
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "white", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "black", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
      //布局调整
      grid: {
        left: 0,
        right: 0,
      },
    };
    //设置配置项
    mycharts.setOption(option);

    //检测浏览器窗口的变化
    //rem:高频的面试,移动端开发必然离不开rem适配[pxtorem]
    //当浏览器的窗口发生变化的时候，图形图标自适应大小
    window.addEventListener("resize", () => {
      //图标自适应
      mycharts.resize();
    });
  },
};
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
}
</style>
